<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#F6F6F6',
		navigationBarTextStyle: 'black',
		backgroundColor: '#F6F6F6',
		navigationBarTitleText: '加入班级',
	},
}
</route>
<template>
	<block>
		<uni-forms ref="formRef" :rules="rules" :modelValue="formData">
			<view class="page-personal my-4">
				<view class="px-4 w-full box-border mt-4">
					<text class="text-[#303030] text-[29rpx]">地区</text>
					<uni-forms-item name="city">
						<view
							class="w-full flex justify-between items-center h-[83rpx] px-[32rpx] mt-2 box-border rounded-[30rpx] bg-white"
						>
							<view class="flex-1">{{ userInfo.city_name }}</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="px-4 w-full box-border mt-4">
					<text class="text-[#303030] text-[29rpx]">区县</text>
					<uni-forms-item name="district">
						<view
							class="w-full flex justify-between items-center h-[83rpx] px-[32rpx] mt-2 box-border rounded-[30rpx] bg-white"
						>
							<view class="flex-1">{{ userInfo.county_name }}</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="px-4 w-full box-border mt-4">
					<text class="text-[#303030] text-[29rpx]">学校</text>
					<uni-forms-item name="school">
						<view
							class="w-full flex justify-between items-center h-[83rpx] px-[32rpx] mt-2 box-border rounded-[30rpx] bg-white"
						>
							<view class="flex-1">{{ userInfo.school_name }}</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="px-4 w-full box-border mt-4">
					<text class="text-[#303030] text-[29rpx]">班级</text>
					<uni-forms-item name="class_id">
						<view
							@tap="openModal('class_id', '选择班级')"
							class="w-full flex justify-between items-center h-[83rpx] mt-2 box-border rounded-[30rpx] bg-white"
							style="height: auto; padding: 10rpx 32rpx"
						>
							<view
								class="flex-1"
								:style="{ color: formData.class_name ? '#303030' : '#C6C6C6' }"
								>{{ formData.class_name || '请选择班级' }}</view
							>
							<image class="w-[50rpx] h-[50rpx]" :src="baseImg + '/my-link.png'"></image>
						</view>
					</uni-forms-item>
				</view>
				<view class="w-full justify-center items-center px-12 mt-8 box-border">
					<view class="w-full relative h-[105rpx]">
						<image
							class="w-full h-full absolute left-[50%] -translate-x-[50%] top-0 z-1"
							:src="baseImg + '/book_xq_btn.png'"
						></image>
						<view
							@tap="submit"
							class="w-full h-full flex justify-center items-center absolute text-[#F4F7F4] text-[40rpx] left-[50%] -translate-x-[50%] top-0 z-2"
							>加入班级</view
						>
					</view>
				</view>
			</view>
		</uni-forms>

		<uni-popup ref="popup" :mask-click="false" type="bottom" background-color="transparent">
			<view class="w-full h-[824rpx] px-6 py-4 box-border">
				<view
					class="w-full bg-white h-full rounded-[30rpx] py-6 box-border flex flex-col justify-center"
				>
					<view class="w-full h-[53rpx] flex justify-between items-center px-6 box-border">
						<image
							@tap="closeModal"
							:src="baseImg + '/close-btn.png'"
							class="w-[44rpx] h-[44rpx]"
						></image>
						<text class="text-[#303030] text-[44rpx]">{{ modalInfo.title }}</text>
						<view
							class="text-[#fff] text-[29rpx] rounded-[29rpx] h-[53rpx] flex px-4 justify-center items-center"
							style="background: #2ba5e0"
							@tap="confirm"
							>确认</view
						>
					</view>
					<view class="w-full pt-6 box-border" style="height: calc(100% - 53rpx)">
						<view class="h-full flex justify-between py-2 box-border">
							<scroll-view scroll-y class="w-full h-full">
								<view
									v-for="item in modalList"
									:key="item.id"
									@tap="setItem(item.id, item.name)"
									class="w-full flex justify-center items-center mb-2 last:mb-0"
								>
									<view
										class="max-w-full px-[38rpx] h-[54rpx] box-border flex justify-center items-center rounded-[27rpx] text-[#303030] text-[29rpx]"
										:style="{
											background: modalInfo.id === item.id ? '#44C651' : '',
											color: modalInfo.id === item.id ? '#fff' : '#303030',
										}"
										><text class="truncate">{{ item.name }}</text></view
									>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupCreate" :mask-click="false" type="bottom" background-color="transparent">
			<view class="w-full h-[824rpx] px-6 py-4 box-border">
				<view
					class="w-full bg-white h-full rounded-[30rpx] py-6 box-border flex flex-col justify-center"
				>
					<view class="w-full h-[53rpx] flex justify-between items-center px-6 box-border">
						<image
							@tap="closeCreateModal"
							:src="baseImg + '/close-btn.png'"
							class="w-[44rpx] h-[44rpx]"
						></image>
						<text class="text-[#303030] text-[44rpx]">{{ modalInfo.title }}</text>
						<view
							class="text-[#fff] text-[29rpx] rounded-[29rpx] h-[53rpx] flex px-4 justify-center items-center"
							style="background: #2ba5e0"
							@tap="closeCreateModal"
							>确认</view
						>
					</view>
					<view class="w-full pt-6 box-border" style="height: calc(100% - 53rpx)">
						<view class="h-full flex justify-between py-2 box-border">
							<!-- 暂无班级 -->
							<view class="w-full mb-2 float-left">
								<view class="w-full text-center text-[30rpx] text-[#303030] font-bold mt-[80rpx]">
									<text>学校暂无班级，请创建班级！</text>
								</view>
								<view class="w-full float-left">
									<view
										class="float-left text-[#fff] text-[30rpx] text-center h-[80rpx]"
										style="
											width: 300rpx;
											margin: 40rpx calc((100% - 300rpx) / 2);
											line-height: 80rpx;
											background: #ffd032;
											border-radius: 80rpx;
										"
										@tap="linkUrl('/pages/class/add/index')"
										>创建班级</view
									>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</block>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';
import { ref, onMounted } from 'vue';
import { getClassList } from '@/service/common';
import { joinClass } from '@/service/class';
import auth from '@/utils/auth';
import { toAuthPage } from '@/utils/jump';
import { getDefaultUserInfo } from '@/service/user';
const linkUrl = (url = '') => {
	if (!url) return;
	if (!auth.getLoginStatus()) toAuthPage();
	uni.navigateTo({ url });
};

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const formRef = ref(null);
const popup = ref(null);
const popupCreate = ref(null);
const modalList = ref([]);
const modalInfo = ref({
	type: '',
	title: '',
	id: null,
	name: '',
});
const formData = ref({
	userName: '',
	avatarUrl: '',
	city: null,
	district: null,
	school: null,
	grade: null,
	class: null,
	class_name: '',
	class_id: null,
});
const rules = ref({
	class_id: {
		rules: [
			{
				required: true,
				errorMessage: '班级不能为空',
			},
		],
	},
});

const setValue = (name, value) => {
	formRef.value?.setValue(name, value);
};

const closeModal = () => {
	modalInfo.value = {
		type: '',
		title: '',
		id: '',
		name: '',
	};
	popup.value?.close();
};
const closeCreateModal = () => {
	popupCreate.value?.close();
};

const submit = () => {
	uni.showLoading({ title: '保存中...' });
	formRef.value
		?.validate()
		.then(async res => {
			console.log('====>submit', res);
			try {
				const data = await joinClass(userInfo.value.school_id, res.class_id);
				uni.hideLoading();
				if (data.status_code === 200) {
					uni.showToast({
						icon: 'none',
						title: '保存成功',
					});

					const res = await getDefaultUserInfo();
					if (res.status_code === 200 && res.data) {
						userStore.setUserInfo({ ...userStore.userInfo, ...res.data });
					}
					uni.switchTab({
						url: '/pages/class/index',
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: data.message,
					});
				}
			} catch (error) {
				console.log(error);
				if (error.statusCode == 400) {
					uni.showToast({
						icon: 'none',
						title: error.data.message,
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '保存失败,请重试',
					});
				}
				uni.hideLoading();
			}
		})
		.catch(err => {
			uni.hideLoading();
		});
};

const classList = ref([]);
const getClass = async (id?: number) => {
	try {
		const res = await getClassList(id);
		if (res.status_code === 200 && res.data?.length) {
			classList.value = res.data.map(item => {
				return {
					id: item.id,
					name: item.class_name,
				};
			});
			//popupCreate.value?.open();
		} else {
			popupCreate.value?.open();
			classList.value = [];
		}
	} catch (error) {
		classList.value = [];
	}
};
const confirm = () => {
	const { type } = modalInfo.value;
	if (!modalInfo.value.id) {
		uni.showToast({
			icon: 'none',
			title: modalInfo.value.title,
		});
		return;
	}
	if (type === 'class_id') {
		formData.value.class_name = modalInfo.value.name;
		formData.value.class_id = modalInfo.value.id;
	}

	closeModal();
};

const setItem = (id, name) => {
	modalInfo.value.id = id;
	modalInfo.value.name = name;
};

const openModal = (type?, title?) => {
	modalInfo.value.type = type;
	modalInfo.value.title = title;
	let id = '';
	let name = '';
	let list = [];
	if (type === 'class_id') {
		id = formData.value.class_id;
		name = formData.value.class_name;
		list = classList.value;
	}
	modalList.value = list;
	modalInfo.value.id = id;
	modalInfo.value.name = name;
	popup.value?.open();
};

onMounted(async () => {
	await getClass(userInfo.value.school_id);
});
</script>
<style lang="scss">
page {
	background: #f6f6f6;
}

.addClass {
	position: relative;
	z-index: 1;
}

.textarea {
	float: left;
	width: 100%;
	height: 150rpx;
	padding: 15rpx 0;
}

.addClass_limit {
	position: absolute;
	right: 20rpx;
	bottom: 0;
	z-index: 2;
	width: auto;
	height: 60rpx;
	font-size: 28rpx;
	line-height: 60rpx;
	color: #c6c6c6;
	text-align: center;
}
</style>
<style lang="scss" scoped>
.personal-change {
	background: #34a4e2;
}
</style>
